

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" href="/img/favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="MaroBytes">
  <meta name="keywords" content="">
  
    <meta name="description" content="💡美化的尽头是默认">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo-theme-Fluid 主题修改日志">
<meta property="og:url" content="https://marobytes.gitee.io/posts/BuildSite/916715778/index.html">
<meta property="og:site_name" content="MaroBytes&#39;s Blog">
<meta property="og:description" content="💡美化的尽头是默认">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s2.loli.net/2022/03/23/M5rmK9d2VoUqR1J.png">
<meta property="article:published_time" content="2022-03-23T02:08:44.000Z">
<meta property="article:modified_time" content="2022-03-23T05:36:29.417Z">
<meta property="article:author" content="MaroBytes">
<meta property="article:tag" content="Hexo">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://s2.loli.net/2022/03/23/M5rmK9d2VoUqR1J.png">
  
  
  <title>Hexo-theme-Fluid 主题修改日志 - MaroBytes&#39;s Blog</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  
    
    
      
      
        
          
          
          
        
        <link  rel="stylesheet" href="https://lib.baomitu.com/prism/1.26.0/themes/prism-tomorrow.min.css" />
      
      
        <link  rel="stylesheet" href="https://lib.baomitu.com/prism/1.26.0/plugins/line-numbers/prism-line-numbers.min.css" />
      
    
  

  
    <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />
  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">


<link rel="stylesheet" href="//at.alicdn.com/t/font_2739639_m8tcwmzu92.css">


<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->

  
<link rel="stylesheet" href="/css/custom.css">



  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"marobytes.gitee.io","root":"/","version":"1.8.14","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":"SWBXKXwKlkrHmdS7mdBGKtRJ-gzGzoHsz","app_key":"CpMzG1VX8bVY5j1IjLz51yoa","server_url":null,"path":"window.location.pathname","ignore_local":true}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 6.1.0">
<style>.github-emoji { position: relative; display: inline-block; width: 1.2em; min-height: 1.2em; overflow: hidden; vertical-align: top; color: transparent; }  .github-emoji > span { position: relative; z-index: 10; }  .github-emoji img, .github-emoji .fancybox { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; text-decoration: none !important; user-select: none !important; cursor: auto !important; }  .github-emoji img { height: 1.2em !important; width: 1.2em !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; user-select: none !important; cursor: auto !important; } .github-emoji-fallback { color: inherit; } .github-emoji-fallback img { opacity: 0 !important; }</style>
</head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>MaroBytes</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/links/">
                <i class="iconfont icon-link-fill"></i>
                友链
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('https://s1.ax1x.com/2022/03/22/qQaAeK.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="Hexo-theme-Fluid 主题修改日志">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2022-03-23 10:08" pubdate>
        2022年3月23日 上午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      4.8k 字
    </span>
  

  
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      40 分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">Hexo-theme-Fluid 主题修改日志</h1>
            
            <div class="markdown-body">
              <div class="note note-warning">
            <p>💡美化的尽头是默认</p>
          </div>
<h2 id="首页文章封面随机图片"><a class="markdownIt-Anchor" href="#首页文章封面随机图片"></a> 首页文章封面随机图片</h2>
<p>这里是通过调用随机图片API实现，如果文章没有指定封面图，将通过API随机返回一张图片作为封面图。下面API调用返回的图片都是与MC酱相关的，如果需要其他类型的图片，可以自己搜索随机图片API，网上有很多。</p>
<div class="code-wrapper"><pre class="line-numbers language-Api" data-language="Api"><code class="language-Api">https://api.ixiaowai.cn/mcapi/mcapi.php</code></pre></div>
<div class="note note-info">
            <p>使用Hexo Fluid主题的小伙伴可直接参考下方修改<code>_config.fluid.yml</code>主题配置文件</p>
          </div>
<div class="code-wrapper"><pre class="line-numbers language-YML" data-language="YML"><code class="language-YML">default_index_img: https://api.ixiaowai.cn/mcapi/mcapi.php</code></pre></div>
<h2 id="实现mac风格代码块"><a class="markdownIt-Anchor" href="#实现mac风格代码块"></a> 实现Mac风格代码块</h2>
<h3 id="github-issue538配置方案"><a class="markdownIt-Anchor" href="#github-issue538配置方案"></a> Github Issue<a target="_blank" rel="noopener" href="https://github.com/fluid-dev/hexo-theme-fluid/issues/538">#538</a>配置方案</h3>
<p>Fluid主题作者没有对代码块有样式设计，原生样式看着比较难受，于是我就去Github Issue中翻阅看看有没有代码块美化的内容，不出所料，果然有人提出类似的问题，回答中有段简陋版的CSS代码，可以实现代码块Mac风格化。</p>
<div class="note note-info">
            <p>适用配置：使用主题配置<code>hightlightjs</code>高亮，Style建议设置为<code>Tomorrow Night</code><br>如何引用外部CSS/JS详见主题👉<a target="_blank" rel="noopener" href="https://hexo.fluid-dev.com/docs/guide/#%E8%87%AA%E5%AE%9A%E4%B9%89-js-css-html">配置文档</a></p>
          </div>
<div class="code-wrapper"><pre class="line-numbers language-CSS" data-language="CSS"><code class="language-CSS">.highlight
    background: #21252b
    border-radius: 5px
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
    padding-top: 30px

    &amp;::before
      background: #fc625d
      border-radius: 50%
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
      content: ' '
      height: 12px
      left: 12px
      margin-top: -20px
      position: absolute
      width: 12px</code></pre></div>
<p>不过通过该CSS代码修改的样式在我看来会有点别扭，而且代码区域和代码框的背景颜色会不统一以及其他一些样式问题，让我一度放弃修改，使用原生代码块。</p>
<h3 id="本站配置方案"><a class="markdownIt-Anchor" href="#本站配置方案"></a> 本站配置方案</h3>
<p><sup id="fnref:1" class="footnote-ref"><a href="#fn:1" rel="footnote"><span class="hint--top hint--rounded" aria-label="Hexo 博客代码块样式美化
">[1]</span></a></sup>我几乎点紫了所有的相关代码块美化方案文章后，看到Tyzhao大佬写的对Matery主题的代码块样式美化方案，并进行移植尝试（不具备前端知识的我只能实现部分样式，如果小伙伴能给出更好的移植方案，欢迎在下方留言分享~）</p>
<p><strong>1、Mac风格代码块样式</strong></p>
<p>首先在<code>node_modules\hexo-theme-fluid\source\css</code>目录下创建自定义CSS文件，这里命名为<code>custom.styl</code>，复制下方代码进去</p>
<div class="code-wrapper"><pre class="line-numbers language-CSS" data-language="CSS"><code class="language-CSS">code {
    padding: 1px 5px;
    font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
    /* font-size: 0.91rem; */
    color: #e96900;
    background-color: #f8f8f8;
    border-radius: 2px;
}

pre code {
    padding: 0;
    color: #e8eaf6;
    background-color: #272822;
}

pre[class*="language-"] {
    padding: 1.2em;
    margin: .5em 0;
}

code[class*="language-"],
pre[class*="language-"] {
    color: #e8eaf6;
    white-space: pre-wrap !important;
} */

.line-numbers-rows {
    border-right-width: 0px !important;
}

.line-numbers {
    padding: 1.5rem 1.5rem 1.5rem 3.2rem !important;
    margin: 1rem 0 !important;
    background: #272822;
    overflow: auto;
    border-radius: 0.35rem;
    tab-size: 4;
}


pre {
    padding: 1.5rem !important;
    margin: 1rem 0 !important;
    background: #272822;
    overflow: auto;
    border-radius: 0.35rem;
    tab-size: 4;
}

pre::before {
    content: "";
    height: 16px;
    margin-bottom: 0;
    display: block;
}

pre::after {
    content: " ";
    position: absolute;
    border-radius: 50%;
    background: #ff5f56;
    width: 12px;
    height: 12px;
    top: 0;
    left: 12px;
    margin-top: 12px;
    -webkit-box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
    box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
}

code {
    padding: 1px 5px;
    font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
    font-size: 0.91rem;
    color: #e96900;
    background-color: #f8f8f8;
    border-radius: 2px;
}

.code_lang {
    position: absolute;
    top: 1.2rem;
    left: 80px;
    line-height: 0;
    font-weight: bold;
    font-family: normal;
    z-index: 1;
    filter: invert(50%);
    cursor: pointer;
}


pre code {
    padding: 0;
    color: #e8eaf6;
    background-color: #272822;
}

pre[class*="language-"] {
    padding: 1.2em;
    margin: .5em 0;
}

code[class*="language-"],
pre[class*="language-"] {
    color: #e8eaf6;
    white-space: pre-wrap !important;
}</code></pre></div>
<p><strong>2、实现代码语言显示</strong></p>
<div class="note note-info">
            <p>接下来的代码实现不要问我为什么，因为我也不懂，只是通过尝试出来的可行方案</p>
          </div>
<p>在<code>node_modules\hexo-theme-fluid\source\js</code>下创建<code>codeBlockFunction.js</code>，复制下方代码（如果没有<code>codeBlockFunction.js</code>中的代码，会导致行号无法正常显示，别问我怎么知道，我试出来的）</p>
<div class="code-wrapper"><pre class="line-numbers language-JavaScript" data-language="JavaScript"><code class="language-JavaScript">// 代码块功能依赖
$(function () {
    $('pre').wrap('&lt;div class="code-area" style="position: relative"&gt;&lt;/div&gt;');
});</code></pre></div>
<p>再创建<code>codeBLang.js</code>文件，复制下方代码</p>
<div class="code-wrapper"><pre class="line-numbers language-JavaScript" data-language="JavaScript"><code class="language-JavaScript">// 代码块语言识别

$(function () {
  var $highlight_lang = $('&lt;div class="code_lang" title="代码语言"&gt;&lt;/div&gt;');

  $('pre').after($highlight_lang);
  $('pre').each(function () {
    var code_language = $(this).attr('class');

if (!code_language) {
  return true;
};
var lang_name = code_language.replace("line-numbers", "").trim().replace("language-", "").trim();

// 首字母大写
lang_name = lang_name.slice(0, 1).toUpperCase() + lang_name.slice(1);
$(this).siblings(".code_lang").text(lang_name);

  });
});</code></pre></div>
<p>上方步骤完成后，请参照主题👉<a target="_blank" rel="noopener" href="https://hexo.fluid-dev.com/docs/guide/#%E8%87%AA%E5%AE%9A%E4%B9%89-js-css-html">配置文档</a>进行自定义CSS/JS引入，这里就不进行赘述了</p>
<h2 id="自定义全局字体"><a class="markdownIt-Anchor" href="#自定义全局字体"></a> 自定义全局字体</h2>
<p><sup id="fnref:2" class="footnote-ref"><a href="#fn:2" rel="footnote"><span class="hint--top hint--rounded" aria-label="博客网站字体设置：思源宋体
">[2]</span></a></sup>首先在<code>node_modules\hexo-theme-fluid\source\css</code>目录下创建自定义CSS文件（如果有了就可以跳过本步骤），这里命名为<code>custom.styl</code>，复制下方代码进去</p>
<div class="code-wrapper"><pre class="line-numbers language-CSS" data-language="CSS"><code class="language-CSS">@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500&amp;display=swap');</code></pre></div>
<p>然后，在主题<code>_config.fluid.yml</code>文件中，修改全局字体配置，参考如下</p>
<div class="code-wrapper"><pre class="line-numbers language-YML" data-language="YML"><code class="language-YML"># 主题字体配置
# Font
font:
  font_size: 16px
  font_family: 'Noto Serif SC'
  letter_spacing: 0.02em
  code_font_size: 85%</code></pre></div>
<h2 id="更换markdown渲染引擎"><a class="markdownIt-Anchor" href="#更换markdown渲染引擎"></a> 更换Markdown渲染引擎</h2>
<p>由于 Hexo 默认的 Markdown 渲染器不支持渲染Katex复杂数学公式以及emoji表情负号，所以需要更换渲染器<sup id="fnref:3" class="footnote-ref"><a href="#fn:3" rel="footnote"><span class="hint--top hint--rounded" aria-label="hexo markdown渲染器 @upupming/hexo-renderer-markdown-it-plus
">[3]</span></a></sup></p>
<p>先卸载原有渲染器：</p>
<div class="code-wrapper"><pre class="line-numbers language-npm" data-language="npm"><code class="language-npm">npm uninstall hexo-renderer-marked --save</code></pre></div>
<p>再安装<code>hexo-renderer-markdown-it-olus</code></p>
<div class="code-wrapper"><pre class="line-numbers language-npm" data-language="npm"><code class="language-npm">npm install @upupming/hexo-renderer-markdown-it-plus --save</code></pre></div>
<p>然后配置渲染插件，该渲染引擎默认支持部分插件，这里我启用emoji渲染插件</p>
<div class="code-wrapper"><pre class="line-numbers language-YML" data-language="YML"><code class="language-YML">markdown_it_plus:
    highlight: true
    html: true
    xhtmlOut: true
    breaks: true
    langPrefix:
    linkify: true
    typographer:
    quotes: “”‘’
    plugins:
        - plugin:
            name: markdown-it-emoji
            enable: true</code></pre></div>
<p>需要查看详细支持信息可以点击参考文章</p>
<h2 id="参考文章"><a class="markdownIt-Anchor" href="#参考文章"></a> 参考文章</h2>
<section class="footnotes"><div class="footnote-list"><ol><li><span id="fn:1" class="footnote-text"><span><a target="_blank" rel="noopener" href="https://www.yshawlon.cn/hexo-bo-ke-dai-ma-kuai-yang-shi-mei-hua.html">Hexo 博客代码块样式美化</a>
<a href="#fnref:1" rev="footnote" class="footnote-backref"> ↩</a></span></span></li><li><span id="fn:2" class="footnote-text"><span><a target="_blank" rel="noopener" href="https://bestzuo.cn/posts/notoserifsc.html">博客网站字体设置：思源宋体</a>
<a href="#fnref:2" rev="footnote" class="footnote-backref"> ↩</a></span></span></li><li><span id="fn:3" class="footnote-text"><span><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_36667170/article/details/105846999">hexo markdown渲染器 @upupming/hexo-renderer-markdown-it-plus</a>
<a href="#fnref:3" rev="footnote" class="footnote-backref"> ↩</a></span></span></li></ol></div></section>
            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/BuildSite/">网站建设</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/Hexo/">Hexo</a>
                    
                  </div>
                
              </div>
              
  <div class="licensing-box iconfont-cc">
    <div class="licensing-title">
      <p>Hexo-theme-Fluid 主题修改日志</p>
      <p>https://marobytes.gitee.io/posts/BuildSite/916715778/</p>
    </div>
    <div class="licensing-meta">
      <div class="licensing-meta-item">
        <p>作者</p>
        <p>MaroBytes</p>
      </div>
      <div class="licensing-meta-item">
        <p>发布于</p>
        <p>2022年3月23日 上午</p>
      </div>
      
      <div class="licensing-meta-item">
        <p>许可协议</p>
        <p>
          
          <a target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
            <i class="iconfont-cc icon-cc" title="CC - 知识共享许可协议"></i>
            <i class="iconfont-cc icon-by" title="BY - 署名"></i>
            <i class="iconfont-cc icon-nc" title="NC - 非商业性使用"></i>
            <i class="iconfont-cc icon-sa" title="SA - 相同方式共享"></i>
          </a>
          
        </p>
      </div>
    </div>
  </div>

              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/posts/Perception/3240645939/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">提问的智慧：或许你可以学会截图</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/posts/default/1243066710/">
                        <span class="hidden-mobile">Hello World</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
              <!-- Comments -->
              <article class="comments" id="comments" lazyload>
                
                  
                
                
  <div id="valine"></div>
  <script type="text/javascript">
    Fluid.utils.loadComments('#valine', function() {
      Fluid.utils.createScript('https://lib.baomitu.com/valine/1.4.16/Valine.min.js', function() {
        var options = Object.assign(
          {"appId":"SWBXKXwKlkrHmdS7mdBGKtRJ-gzGzoHsz","appKey":"CpMzG1VX8bVY5j1IjLz51yoa","path":"window.location.pathname","placeholder":"嘿！同学~ 别默默的看了，来发评论吧~","avatar":"robohash","meta":["nick","mail","link"],"requiredFields":["nick","mail"],"pageSize":10,"lang":"zh-CN","highlight":true,"recordIP":false,"serverURLs":"","emojiCDN":null,"emojiMaps":null,"enableQQ":false},
          {
            el: "#valine",
            path: window.location.pathname
          }
        )
        new Valine(options);
        Fluid.utils.waitElementVisible('#valine .vcontent', () => {
          Fluid.plugins.initFancyBox('#valine .vcontent img:not(.vemoji)');
        })
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the comments</noscript>


              </article>
            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     Powered by <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> and <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/js/local-search.js" ></script>



  
    <script  src="/js/img-lazyload.js" ></script>
  



  
    
      <script  src="https://lib.baomitu.com/prism/1.26.0/components/prism-core.min.js" ></script>
      <script  src="https://lib.baomitu.com/prism/1.26.0/plugins/autoloader/prism-autoloader.min.js" ></script>
      
        <script  src="https://lib.baomitu.com/prism/1.26.0/plugins/line-numbers/prism-line-numbers.min.js" ></script>
      
    
  



  
    <script  src="https://lib.baomitu.com/tocbot/4.18.0/tocbot.min.js" ></script>
  
  
    <script  src="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js" ></script>
  
  
    <script defer src="https://lib.baomitu.com/clipboard.js/2.0.10/clipboard.min.js" ></script>
  



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>


  <script defer src="/js/leancloud.js" ></script>



  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>












  

  

  

  

  

  




  
<script src="/js/codeBLang.js"></script>
<script src="/js/codeBlockFunction.js"></script>



<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>


</body>
</html>
